﻿<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>MooTools Datepicker</title>
	<link type="text/css" href="style.css" rel="stylesheet" />
	<link href="../../../../src/ui/calendar/datepicker/default.css" rel="stylesheet" type="text/css" media="screen" />
	<link href="../../../../src/ui/calendar/datepicker/dashboard/dashboard.css" rel="stylesheet" type="text/css"
		media="screen" />
	<link href="../../../../src/ui/calendar/datepicker/jqui/jqui.css" rel="stylesheet" type="text/css"
		media="screen" />
	<link href="../../../../src/ui/calendar/datepicker/vista/vista.css" rel="stylesheet" type="text/css"
		media="screen" />
</head>
<body>
	<h1>
		MooTools Datepicker 1.6 Tests</h1>
	<div id="debug">
		&nbsp;</div>
	<p>
		<label>
			Datepicker with Vista skin:</label><br />
		<input type="text" value="" class="date demo_vista" /><br />
		<select>
			<option>IE should shim this!</option>
		</select>
	</p>
	<p>
		<label>
			Second datepicker with Vista skin:</label><br />
		<input type="text" value="" class="date demo_vista" />
	</p>
	<p>
		<label>
			Third datepicker with Vista skin:</label><br />
		<input type="text" value="" class="date demo_vista" />
	</p>
	<p>
		<label>
			Datepicker with OSX Dashboard skin:</label><br />
		<input name="date_B" type="text" value="03/07/2010" class="date demo_dashboard" />
	</p>
	<p>
		<label>
			Datepicker with jQuery UI skin:</label><br />
		<input name="date_B" type="text" value="" class="date demo_jqui" />
	</p>
	<p>
		<a href="#" id="attach">Click to attach the datepicker to this field</a><br />
		<a href="#" id="detach">Click to detach the datepicker from this field</a><br />
		<a href="#" id="show">Show datepicker (after you attached it)</a><br />
		<label>
			Attach Datepicker:</label><br />
		<input id="attachByClick" type="text" value="" class="date" />
	</p>
	<p>
		<label>
			Min and Max Date:</label><br />
		<input id="minMax" type="text" value="" class="date" />
	</p>
	<p>
		<label>
			Toggler:</label><br />
		<input id="toggle" type="text" value="" class="date" />
		<a href="#" id="toggler">Toggle</a>
	</p>
	<p>
		<label>
			Time Picker:</label><br />
		<input id="time" type="text" value="" class="date" />
	</p>
	<p>
		<label>
			Date and Time Picker:</label><br />
		<input id="dateandtime" type="text" value="" class="date" />
	</p>
	<p>
		<label>
			Date Object as min/max date option:</label><br />
		<input id="date_object_options" type="text" value="" class="date" />
	</p>
	<script type="text/javascript" charset="utf-8" src="../../../../src/loader.js"></script>
	<script type="text/javascript">		HmJS.$JSManager.$basepath = '../../../../src/';</script>
	<script type="text/javascript" charset="utf-8" src="../../../../src/demo/action/ui/calendar/datepicker/legacy.js"></script>
</body>
</html>
